<%--
  Created by IntelliJ IDEA.
  User: 86135
  Date: 2023/3/26
  Time: 14:14
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>新增书籍</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/css/semantic.min.css">
    <script src="${pageContext.request.contextPath}/statics/js/semantic.min.js"></script>
    <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
    <style>
        body{
            background-image: url("${pageContext.request.contextPath}/statics/images/bg.png");
        }
    </style>
</head>
<body>
<div class="container">

    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>新增书籍</small>
                </h1>
            </div>
        </div>
    </div>
    <div style="width: 40%;float: left;margin-left: 10%;margin-top: 5%">
        <form id="item" style="font-size: 18px;" enctype="multipart/form-data">
            书籍ISBN：<input type="text" name="bookISBN" style="border-radius: 5px;"><br><br><br>
            书籍名称：<input type="text" name="bookName" style="border-radius: 5px;"><br><br><br>
            书籍数量：<input type="number" name="bookCounts" style="border-radius: 5px;"><br><br><br>
            书籍价格：<input type="text" name="bookPrices" style="border-radius: 5px;"><br><br><br>
            书籍作者：<input type="text" name="author" style="border-radius: 5px;"><br><br><br>
            书籍详情：<input type="text" name="detail" style="border-radius: 5px;"><br><br><br>
            <p>书籍图片：</p>
            <input type="file" name="photo" title="点击上传图片" style="float: left"/>
        </form>
    </div>



    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.6.0.js"></script>
    <script>
        function add(){
            var item = new FormData(document.getElementById("item"));
            $.post({
                url:"${pageContext.request.contextPath}/book/addBook",
                data:item,
                processData:false,
                contentType:false,
            });
            sleep(1000).then(() => {
                alert("新增成功！");
                window.location = "${pageContext.request.contextPath}/book/findAllBooksAdmin";
            })
        }

        //改良setTimeout()函数
        function sleep (time) {
            return new Promise((resolve) => setTimeout(resolve, time));
        }

        function Return(){
            window.location = "${pageContext.request.contextPath}/book/findAllBooksAdmin"
        }
    </script>

</div>
<div align="center" style="margin-top: 5%">
    <input type="button" value="添加" onclick="add()" class="ui primary button" style="margin-right: 5%"/>
    <input type="button" value="返回" onclick="Return()" class="ui toggle button"/>
</div>
</body>

